<template>
    <!-- 课程卡片 -->
    <!-- 置顶课程 -->
    <div class="class-box" style="max-height:320px ;">
        <el-card class="component-home_card" v-for="(course, index) in allCourse" :key="index" v-show="course.isTop == 0">
            <div class="header-info" @click="toClassDetail(course.courseId)">
                <p class="time">{{ course.courseList.academicYear }} {{ course.courseList.semester }} </p>
                <p class="name">{{ course.courseList.courseName }}</p>
                <p class="classname">{{ course.courseList.clazz }}</p>
                <p class="classno">加课码{{ course.courseList.courseCode }}</p>
            </div>
            <div class="user-info">
                <div @click="toMember" style="cursor:pointer ;" v-show="course.type == 0">
                    负责人:<span style="text-align:left ;">{{ course.user.name }}</span>
                </div>
                <div @click="toMember" style="cursor:pointer ;" v-show="course.type == 1 || course.type == 2">
                    成员:<span style="text-align:left ;">{{ course.courseList.stuNum }}</span>人
                </div>
                <span style="cursor: pointer;" @click="untop(course.courseId, course.id)"
                    v-show="course.isTop == 0">取消置顶</span>
                <span style="cursor: pointer;" @click="ontop(course.courseId, course.id)"
                    v-show="course.isTop == 1">置顶</span>
                <div v-show="course.type == 0">
                    <el-dropdown trigger="click">
                        <span style="cursor: pointer;"><i class="el-icon-more"></i></span>
                        <template v-slot:dropdown>
                            <el-dropdown-menu>
                                <div @click="dropClassDialog(course.id)">
                                    <el-dropdown-item class="clearfix">退课<el-badge class="mark" /></el-dropdown-item>
                                </div>
                                <div @click="pigeonholeDialogVisible1(course.courseId, course.id)">
                                    <el-dropdown-item class="clearfix">归档管理<el-badge class="mark" /></el-dropdown-item>
                                </div>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div v-show="course.type == 1">
                    <el-dropdown trigger="click">
                        <span style="cursor: pointer;"><i class="el-icon-more"></i></span>
                        <template v-slot:dropdown>
                            <el-dropdown-menu>
                                <div @click="delectClassDialogVisible1(course.id)">
                                    <el-dropdown-item class="clearfix">删除<el-badge class="mark" /></el-dropdown-item>
                                </div>
                                <div @click="edit(course.courseId)">
                                    <el-dropdown-item class="clearfix">编辑<el-badge class="mark" /></el-dropdown-item>
                                </div>
                                <div @click="pigeonholeDialogVisible1(course.courseId, course.id)">
                                    <el-dropdown-item class="clearfix">归档管理<el-badge class="mark" /></el-dropdown-item>
                                </div>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <div v-show="course.type == 2">
                    <el-dropdown trigger="click">
                        <span style="cursor: pointer;"><i class="el-icon-more"></i></span>
                        <template v-slot:dropdown>
                            <el-dropdown-menu>
                                <div @click="edit(course.courseId)">
                                    <el-dropdown-item class="clearfix">
                                        编辑
                                        <el-badge class="mark" />
                                    </el-dropdown-item>
                                </div>
                                <div @click="pigeonholeDialogVisible1(course.courseId, course.id)">
                                    <el-dropdown-item class="clearfix">
                                        归档管理
                                        <el-badge class="mark" />
                                    </el-dropdown-item>
                                </div>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>

            <!-- 归档对话框 -->
            <el-dialog title="要归档此课程吗" :visible="pigeonholeDialogVisible" @close="pigeonholeDialogVisible = false">
                <div>
                    <p>您可以在“课程-归档管理”中查看次课程</p>
                    <p v-show="course.type == 1">【归档全部】学生的课程也会一起被归档</p>
                    <p v-show="course.type == 1">【归档自己】学生的课程不会被归档</p>
                </div>
                <template v-slot:footer>
                    <div class="dialog-footer">
                        <el-button @click="pigeonholeDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="pigeonhole()">归档自己</el-button>
                    </div>
                </template>
            </el-dialog>

            <!-- 退课对话框 -->
            <el-dialog title="确认要退出课程" :visible="dropClassDialogVisible" @close="closeDropClassDialog">
                <div>
                    <p>您的这个课程的任何信息或评论将被永久删除</p>
                    <p style="color:#ff941f;">警告：此操作无法撤销</p>
                    <el-form :model="dropCoursePasswordDialogFrom" status-icon :rules="dropCoursePasswordDialogFromRules"
                        ref="dropCoursePasswordDialogFromRef">
                        <el-form-item prop="password">
                            <el-input v-model="dropCoursePasswordDialogFrom.password" autocomplete="off"
                                placeholder="请输入登录密码验证"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <template v-slot:footer>
                    <div class="dialog-footer">
                        <el-button @click="closeDropClassDialog()">取 消</el-button>
                        <el-button type="primary" @click="dropClass()">确定</el-button>
                    </div>
                </template>
            </el-dialog>

            <!-- 删除课程对话框 -->
            <el-dialog title="确认要删除课程" :visible="delectClassDialogVisible" @close="closeDelectClassDialog()">
                <div>
                    <p>您的这个课程的任何信息或评论将被永久删除</p>
                    <p style="color:#ff941f;">警告：此操作无法撤销</p>
                    <p style="color:#4285f4;">提醒：已用课程数包含了“删除课程数”</p>
                    <el-form :model="delectCoursePasswordDialogFrom" status-icon
                        :rules="delectCoursePasswordDialogFromRules" ref="delectCoursePasswordDialogFromRef">
                        <el-form-item prop="password">
                            <el-input placeholder="请输入登录密码验证" v-model="delectCoursePasswordDialogFrom.password"
                                autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <template v-slot:footer>
                    <div class="dialog-footer">
                        <el-button @click="closeDelectClassDialog()">取 消</el-button>
                        <el-button type="primary" @click="delectCourse()">确定</el-button>
                    </div>
                </template>
            </el-dialog>
        </el-card>
    </div>
</template>

<script >
import { Encrypt } from "@/tools/decrypt.js";
import {getRequest, postRequest} from "@/utils/api";
export default {
    name: 'topMainPage',
    data() {
        return {
            stuList: [],
            user: {
                userId: this.$store.getters.user.id,
            },
            userType: 0,
            // ty

            // isTop: 0, //0 已经置顶，显示取消置顶字段 1 未置顶，显示置顶字段
            // 所有课程
            allCourse1: [{
              courseList: {
                courseName: '计算机网络',
                clazz: '2017级计算机科学与技术1班',
                courseCode: '2017-2018-1',
                stuNum: 20
              }
            }],
            // 未归档课程
            allCourse: [{
              courseList: {
                courseName: '计算机网络',
                clazz: '2017级计算机科学与技术1班',
                courseCode: '2017-2018-1',
                stuNum: 20
              }
            }],
            members: {},

            changeIsTop: {
                courseId: '',
                id: '',
                isTop: ''
            },
            // 删除课程
            courseId: '',
            delectClassDialogVisible: false,
            delectCoursePasswordDialogFrom: {
                password: ''
            },
            delectCoursePasswordDialogFromRules: {
                password: [
                    { required: true, message: '必填项', trigger: 'blur', }
                ]
            },
            // 退出课程
            dropClassDialogVisible: false,
            dropCoursePasswordDialogFrom: {
                password: ''
            },
            dropCoursePasswordDialogFromRules: {
                password: [
                    { required: true, message: '必填项', trigger: 'blur', }
                ]
            },
            // 归档
            pigeonholeDialogVisible: false,//归档对话框 
            pigeonholeAllDialogVisible: false,//归档全部
            changeIspigeonhole: {
                courseId: '',
                id: '',
                isPigeonhole: ''
            },
        }
    },
    methods: {
        getAllCourse() {
            postRequest("/userCourse/list", this.user).then(res => {
                if (res) {
                    this.allCourse1 = res.data.list
                    for (let i = 0; i < this.allCourse1.length; i++) {
                        if (this.allCourse1[i].isPigeonhole === 1) {
                            this.allCourse.push(this.allCourse1[i])
                        }
                    }
                }
            })
        },
        pigeonholeDialogVisible1(courseId, id) {
            this.courseId = courseId
            this.changeIspigeonhole.courseId = courseId
            this.changeIspigeonhole.id = id
            this.changeIspigeonhole.isPigeonhole = 0
            this.pigeonholeDialogVisible = true;

        },
        //归档对话框展示
        pigeonhole() {
            postRequest("/userCourse/update", this.changeIspigeonhole).then(res => {
                if (res) {
                    this.$message.success("归档成功！")
                    this.pigeonholeDialogVisible = false
                    window.location.reload();
                }
            })

        },
        //归档全部
        pigeonholeAll() {
            getRequest(`/userCourse/placeToFile/${this.courseId}`).then(res => {
                if (res) {
                    this.pigeonholeAllDialogVisible = false
                    this.pigeonholeDialogVisible = false
                } else {
                    this.$message.error("归档失败")
                }
            })
        },
        // 退课
        dropClass() {
            this.dropCoursePasswordDialogFrom.password = Encrypt(this.dropCoursePasswordDialogFrom.password)
            if (this.dropCoursePasswordDialogFrom.password === this.$store.getters.user.password) {
                getRequest(`/userCourse/delete/${this.courseId}`).then(res => {
                    if (res) {
                        this.dropCoursePasswordDialogFrom.password = ''
                        this.dropClassDialogVisible = false
                        window.location.reload();
                        window.location.reload();
                    }
                })
            } else {
                this.$message.error("密码错误！")
            }
        },

        closeDropClassDialog() {
            this.dropCoursePasswordDialogFrom.password = ''
            this.dropClassDialogVisible = false
        },
        //退课对话框展示
        dropClassDialog(courseId) {
            this.courseId = courseId
            this.dropClassDialogVisible = true
        },
        // 删除课程
        delectClassDialogVisible1(courseId) {
            this.courseId = courseId
            this.delectClassDialogVisible = true

        },
        delectCourse() {
            this.delectCoursePasswordDialogFrom.password = Encrypt(this.delectCoursePasswordDialogFrom.password)
            if (this.delectCoursePasswordDialogFrom.password === this.$store.getters.user.password) {
                getRequest(`/userCourse/delete/${this.courseId}`).then(res => {
                    if (res) {
                        this.delectCoursePasswordDialogFrom.password = ''
                        // this.$refs.delectCoursePasswordDialogFromRef.resetFields();
                        this.delectClassDialogVisible = false
                        window.location.reload();
                        window.location.reload();
                    }
                })

            } else {
                this.$message.error("密码错误！")
            }
        },
        closeDelectClassDialog() {
            this.delectCoursePasswordDialogFrom.password = ''
            this.delectClassDialogVisible = false
        },
        //跳转到课程内容页面
        toClassDetail(courseId) {
            this.$store.dispatch("saveCourseIdInfo", { courseId: courseId })
            this.$router.push("/main/classDetail")
        },
        //跳转到成员页面
        toMember() {
            this.$router.push("/main/member")
        },
        // 点击 取消置顶字段，让课程不置顶，同时字段改变为 置顶
        untop(courseId, id) {
            this.changeIsTop.courseId = courseId
            this.changeIsTop.id = id
            this.changeIsTop.isTop = 1
            postRequest("/userCourse/update", this.changeIsTop).then(res => {
                if (res) {
                    window.location.reload();
                    window.location.reload();
                } else {
                    this.$message.error("修改失败")
                }

            })


        },
        //点击 置顶字段，让课程置顶，同时字段改变为 取消置顶
        ontop(courseId, id) {

            this.changeIsTop.courseId = courseId
            this.changeIsTop.id = id
            this.changeIsTop.isTop = 0

            
        },
        //跳转到课程设置
        edit(courseId) {
            this.$store.dispatch("saveCourseIdInfo", { courseId: courseId })
            this.$router.push('/classSetting')
        },


    },
    mounted() {
        // this.getAllCourse()
    },

}
</script>
<style scoped>
.class {
    display: flex;
}

.view-home .home-content .class-box {
    margin: 8px -10px 0;
    display: flex;
    flex-flow: row wrap;
    overflow-y: auto;
}

.view-home .home-content .class-box>div {
    margin: 11px;

}

.component-home_card {
    width: 255px;
    height: 234px;
    background: #fff;
    border: 1px solid #e2e6ed;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.component-home_card .header-info {
    cursor: pointer;
    padding: 5px 24px;
    height: 152px;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    background-color: #3367d5;
    background-image: url(../../../../assets/backgroundImage/backgroundImage.jpg);
    /* https:/assets.ketangpai.com/theme/min/30.jpg */
}

.time {
    font-size: 8px;
    color: rgb(184, 184, 184);
}

.name {
    font-size: 20px;
    margin: 8px 0 8px 0;
}

.classname {
    font-size: 10px;
    margin: 8px 0 8px 0;
}

.classno {
    padding-top: 15px;
    font-size: 14px;
    margin: 8px 0 8px 0;
}

.user-info {
    padding: 20px 0 0 0;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    line-height: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #3c4043;
}

.el-dropdown-item {
    margin: 0;
    padding: 0 0 0 0;
    height: 36px;
}
</style>